<template>
  <el-row class="line">
    <div class="echartsTop">
      <span>
        <i class="iconfont icon-chartcolumn"></i>出入库情况
      </span>
      <div class="rightTime">
        <el-date-picker v-model="value1" type="monthrange" @change="timeChange" range-separator="至" start-placeholder="开始月份" end-placeholder="结束月份"></el-date-picker>
      </div>
    </div>
    <div class="echartsBox">
      <div v-if="list.length > 0" id="materialRightLine" class="allWidthHeight" />
      <div v-else class="kong">暂无数据</div>
    </div>
  </el-row>
</template>
<script>
import * as echarts from 'echarts'
export default {
  props: {},
  data() {
    return {
      myChart: null,
      value1: '',
      seachObj: {
        beginMonth: '',
        endMonth: ''
      },
      list: []
    }
  },
  watch: {},
  mounted() {},
  methods: {
    infoSize() {
      this.myChart.resize()
    },
    timeChange($event) {
      this.seachObj.beginMonth = timeFormatToString($event[0]).slice(0, 7)
      this.seachObj.endMonth = timeFormatToString($event[1]).slice(0, 7)
      this.getInOutByMonth()
    },
    async getInOutByMonth() {
      const res = await this.$axios.post(
        '/board/material/manage/inOutByMonth',
        this.seachObj
      )
      if (res?.data.code === 200) {
        this.list = res.data.data
        let obj = {
          rawInNums: [],
          inOutDates: [],
          proInNums: [],
          proOutNums: [],
          rawOutNums: []
        }
        res.data.data.forEach((item) => {
          obj.rawInNums.push(item.rawInNum)
          obj.inOutDates.push(item.inOutDate)
          obj.proInNums.push(item.proInNum)
          obj.proOutNums.push(item.proOutNum)
          obj.rawOutNums.push(item.rawOutNum)
        })
        setTimeout(async () => {
          this.setMaterialRightLine(obj)
        }, 500)
      }
    },
    /* 出入库情况echarts */
    setMaterialRightLine(data) {
      if (this.list.length > 0) {
        const option = {
          tooltip: {
            trigger: 'axis', // 触发类型：坐标轴触发
            axisPointer: {
              type: 'shadow' // 指示器类型：阴影指示器
            }
          },
          grid: {
            left: '15%', // 距离左侧的距离
            right: '2%', // 距离右侧的距离
            top: '25%', // 距离顶部的距离
            bottom: '14%' // 距离底部的距离
          },
          legend: {
            data: ['原料入库', '原料出库', '成品入库', '成品出库'],
            right: '0',
            top: '10px',
            // width: '100px',
            textStyle: {
              fontSize: '10px',
              color: '#fff' // 这里设置图例的字体颜色为红色
            },
            itemWidth: 5, // 设置图例标记的图形宽度
            itemHeight: 5 // 设置图例标记的图形高度
          },
          xAxis: [
            {
              splitLine: { show: false },
              axisPointer: {
                type: 'shadow'
              },
              axisLine: {
                // 坐标轴 轴线
                lineStyle: {
                  color: '#fff',
                  width: 1,
                  type: 'solid'
                }
              },
              axisLabel: {
                color: '#fff',
                formatter: '{value}月',
                interval: 0 // 代表显示所有x轴标签显示
              },
              type: 'category',
              data: data.inOutDates
            }
          ],
          yAxis: [
            {
              splitLine: { show: false },
              axisLine: {
                show: true,
                // 坐标轴 轴线
                lineStyle: {
                  color: '#fff',
                  width: 1,
                  type: 'solid'
                }
              },
              axisLabel: {
                color: '#fff'
              },
              axisTick: {
                show: true
              },
              type: 'value'
            }
          ],
          dataZoom: [
            {
              type: 'inside'
            }
          ],
          series: [
            {
              name: '原料入库',
              type: 'bar',
              data: data.rawInNums,
              itemStyle: { color: '#2FD7B3' }
              // label: {
              //   show: true, // 显示数值
              //   position: 'top', // 在顶部显示
              //   color: '#fff'
              // }
            },
            {
              name: '原料出库',
              type: 'bar',
              data: data.rawOutNums,
              itemStyle: { color: '#2786E8' }
              // label: {
              //   show: true, // 显示数值
              //   position: 'top', // 在顶部显示
              //   color: '#fff'
              // }
            },
            {
              name: '成品入库',
              type: 'bar',
              data: data.proInNums,
              itemStyle: { color: '#203FAF' }
              // label: {
              //   show: true, // 显示数值
              //   position: 'top', // 在顶部显示
              //   color: '#fff'
              // }
            },
            {
              name: '成品出库',
              type: 'bar',
              data: data.proOutNums,
              itemStyle: { color: '#989AAC' }
              // label: {
              //   show: true, // 显示数值
              //   position: 'top', // 在顶部显示
              //   color: '#fff'
              // }
            }
          ]
        }
        if (
          this.myChart != null &&
          this.myChart !== '' &&
          this.myChart !== undefined
        ) {
          this.myChart.dispose() // 销毁
        }
        this.myChart = echarts.init(
          document.getElementById('materialRightLine')
        )
        this.myChart.clear()
        this.myChart.setOption(option, true)
      }
    }
  }
}
</script>
<style lang='scss' scoped>
.line {
  height: 50%;
  padding-top: 5px;
  .echartsTop {
    height: 25px;
    line-height: 25px;
    font-size: 14px;
    font-weight: normal;
    color: #c0e0fe;
    margin: 0;
    padding: 0 0 5px 7px;
    position: relative;
    span {
      position: absolute;
      left: 0;
      bottom: -10px;
      i {
        color: #c0e0fe;
        margin-right: 10px;
      }
    }
    .rightTime {
      position: absolute;
      right: 0;
      top: 5px;
      width: 150px;
    }
  }
  .echartsBox {
    height: calc(100% - 25px);
  }
}
</style>
<style lang='scss'>
.rightTime {
  .el-date-editor.el-input {
    width: 100% !important;
  }
  .el-input__inner {
    height: 22px;
    line-height: 22px;
    background: none;
    font-size: 10px;
  }
  .el-input__icon {
    line-height: 22px;
    font-size: 10px;
  }
}
</style>
